<template>
  <module
    ref="module"
    class="equipment-information"
    :borderConfig="borderConfig"
    :moduleConfig="moduleConfig"
    :octagon="octagon"
    :barLineConfigTop="barLineConfigTop"
    :doubleRingTop="doubleRingTop"
    :barLineConfigBottom="barLineConfigBottom"
    :doubleRingBottom="doubleRingBottom">
  </module>
</template>

<script>
import Module from './../components/Module.vue'
export default {
  name: 'equipmentInformation',
  components: {
    Module
  },
  data () {
    return {
      borderConfig: {
        moduleType: '1x1',
        icon: '',
        titleText: '设备信息',
        goPageUrl: '/home/facility'
      },
      moduleConfig: {
        isOctagon: true, // 是否需要头部的八边形
        topType: '14', // 第一层显示内容
        bottomType: '14' // 第二层显示内容
      },
      barLineConfigTop: {
        title: {
          text: '年度设备巡检完成率和及时率'
        },
        axis: {
          yAxisConversion: '%', // Y轴坐标%
          xAxisDataType: 1, // X轴坐标从当前月份开始
          xAxisLabelInterval (index, name) {
            if (index % 2 === 1) {
              return name
            }
          }
        },
        yAxis: {
          max: 100 // 坐标轴最大值
        },
        tooltipsConfig: {
          symbol: '%',
          tipsColor: ['#2e92cb', '#b60d81'],
          isNearlyYear: true // 月份是否是当前月份开始
        },
        seriesData: []
      },
      barLineConfigBottom: {
        title: {
          text: '年度设备保养完成率和及时率'
        },
        axis: {
          yAxisConversion: '%', // Y轴坐标%
          xAxisDataType: 1, // X轴坐标从当前月份开始
          xAxisLabelInterval (index, name) {
            if (index % 2 === 1) {
              return name
            }
          }
        },
        yAxis: {
          max: 100 // 坐标轴最大值
        },
        tooltipsConfig: {
          symbol: '%',
          tipsColor: ['#2e92cb', '#b60d81'],
          isNearlyYear: true // 月份是否是当前月份开始
        },
        seriesData: []
      },
      doubleRingTop: {
        legend: ['本月巡检完成率', '本月巡检及时率'],
        data: []
      },
      octagon: {
        iconClass: ['icon-shebei', 'icon-shebeiyichang'],
        octagonName: ['正常设备', '异常设备'],
        octagonNumber: [0, 0],
        octagonUnit: ['', '']
      },
      doubleRingBottom: {
        legend: ['本月保养完成率', '本月保养及时率'],
        data: []
      },
      inspection: [], // 巡检数据
      maintain: [], // 保养数据
      refreshInterval: 0
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    },
    isIndex () {
      return this.$store.state.isIndex
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    // 近一年员工报单趋势
    fieldContrastByMonth (type, isRefresh) {
      let objName = type === '1000' ? 'inspection' : 'maintain'
      this.equipmentInfoApi.fieldContrastByMonth({ organId: this.organId, dtType: type }).then(res => {
        if (res.data.code === '0') {
          let data = res.data.data
          this[objName] = data
        } else {
          this[objName] = {}
          this.$parent.showTips('请求失败，点击确认继续刷新')
        }
        if (!isRefresh) {
          this.handleData(type)
        }
      }, res => {
        this[objName] = {}
        this.handleData(type)
        this.$parent.showTips('请求失败，点击确认继续刷新')
      })
    },
    // 获取当月数据
    presentMonth () {
      this.equipmentInfoApi.presentMonth({ organId: this.organId }).then(res => {
        if (res.data.code === '0') {
          let data = res.data.data
          this.octagon.octagonNumber = [res.data.data.equipmentNormalNum, res.data.data.equipmentMalfunctionNum]
          this.doubleRingTop.data = [parseFloat(data.inspectFinishRate.replace('%', '')), parseFloat(data.inspectTimelyRate.replace('%', ''))]
          this.doubleRingBottom.data = [parseFloat(data.maintenanceFinishRate.replace('%', '')), parseFloat(data.maintenanceTimelyRate.replace('%', ''))]
        } else {
          this.doubleRingTop.data = [0, 0]
          this.doubleRingBottom.data = [0, 0]
          this.octagon.octagonNumber = [0, 0]
          this.$parent.showTips('请求失败，点击确认继续刷新')
        }
      }, res => {
        this.doubleRingTop.data = [0, 0]
        this.doubleRingBottom.data = [0, 0]
        this.octagon.octagonNumber = [0, 0]
        this.$parent.showTips('请求失败，点击确认继续刷新')
      })
    },
    getData (type, refreshInterval, isRefresh) {
      if (type === 'init') {
        // 巡检数据
        this.fieldContrastByMonth('1000', isRefresh)
        // 保养数据
        this.fieldContrastByMonth('2000', isRefresh)
        // 当月数据
        this.presentMonth()
        if (refreshInterval) {
          this.refreshInterval = refreshInterval
          this.automaticRedrawing()
        }
      } else {
        this.handleData('1000')
        this.handleData('2000')
      }
    },
    handleData (type) {
      let data = type === '1000' ? this.inspection : this.maintain
      let accomplishArr = []
      let timelyArr = []
      if (data.length > 0) {
        data.forEach(item => {
          accomplishArr.push(parseFloat(item.finishRate).toFixed(2))
          timelyArr.push(parseFloat(item.timelyRate).toFixed(2))
        })
      }
      let configName = type === '1000' ? 'barLineConfigTop' : 'barLineConfigBottom'
      let nameStr = type === '1000' ? '巡检' : '保养'
      this[configName].seriesData = [
        {
          data: accomplishArr,
          name: `${nameStr}完成率`,
          colorIndex: 0
        },
        {
          data: timelyArr,
          name: `${nameStr}及时率`,
          colorIndex: 1
        }
      ]
    },
    handleData2 () {
      let bottomData = this.maintain
      let accomplishArr = []
      let timelyArr = []
      if (JSON.stringify(bottomData) !== '{}') {
        bottomData.forEach(item => {
          accomplishArr.push(parseFloat(item.finishRate).toFixed(2))
          timelyArr.push(parseFloat(item.timelyRate).toFixed(2))
        })
      }
      this.barLineConfigBottom.seriesData = [
        {
          data: accomplishArr,
          name: '保养完成率',
          colorIndex: 0
        },
        {
          data: timelyArr,
          name: '保养及时率',
          colorIndex: 1
        }
      ]
    },
    resizeChart () {
      this.$refs.module.resizeChart()
    },
    // 根据接口返回的时间间隔请求接口
    automaticRedrawing () {
      clearInterval(window.equipmentInformationTimer)
      if (this.refreshInterval > 0 && this.isIndex) {
        window.equipmentInformationTimer = setInterval(() => {
          this.getData('init', '', true)
        }, this.refreshInterval * 1000)
      }
    }
  },
  mounted () {
  },
  destroyed () {
    clearInterval(window.equipmentInformationTimer)
  }
}
</script>
<style lang="scss" scoped>
.equipment-information {
  .module-content {
    width: 100%;
    height: 100%;
  }
  .module-left {
    width: 70%;
    height: 100%;
    float: left;
  }
  .module-right {
    width: 30%;
    height: 65%;
    transform: translate(0, 46%);
    float: left;
    position: relative;
    & /deep/ .singleRing-title {
      position: absolute;
      left: 0;
      bottom: 4%;
      color: #fff;
    }
  }
}
</style>
